<template>
    <div class="main-window-box">
        <el-tabs v-model="focusTabName" type="card" closable @tab-remove="delTab">
            <el-tab-pane
                v-for="item in tabs"
                :key="item.uid"
                :name="item.name">
                <span slot="label"><i class="el-icon-paperclip"></i>{{item.title}}</span>
                <adapter :initParam="tabsParameter[item.name]"></adapter>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import adapter from '@/components/server/adapter'
export default {
    components:{
        adapter
    },
    data(){
        return {
            focusTabName: '',
            tabs: [],
            tabsParameter:{}
        }
    },
    created(){
        //左边key点击事件监听
        this.$eventBus.$on('addTab',(data)=>{
            //新开窗口的条件
            if((data.target==="self"&&this.tabs.length===0)||data.target==="new"||this.tabsParameter[this.focusTabName].type==="server"){
                let exists=this.existsTabName(data.tabName)
                if(!exists){
                    this.addTab(data)
                    this.focusTabName=data.tabName
                    this.tabsParameter[this.focusTabName]=data
                }else{
                    this.focusTabName=data.tabName
                    this.$message.error({
                        message:this.$t('publicFeedback.alreadyExistsRepeat')
                    })
                }
            }else if(data.target==="self"&&this.tabs.length>0){
                this.updateTab(data)
            }
        })
        //关闭当前tab事件监听
        this.$eventBus.$on('closeCurrentTab',()=>{
            this.delTab(this.focusTabName)
        }),
        //修改redis键的名称
        this.$eventBus.$on('modifyKeyName',(data,keyName)=>{
            let oldKeyName=data.key;
            data.key=keyName;
            let index;
            //获取当前聚焦的tab下标
            for(var i=0;i<this.tabs.length;i++){
                if(this.tabs[i].name===this.focusTabName){
                    index=i;
                    break;
                }
            }
            var splitName=this.tabs[index].name.split("┃");
            var newName=keyName+"┃"+splitName[1]+"┃"+splitName[2]
            this.tabs[index].title=newName
            this.tabs[index].name=newName
            this.focusTabName=newName
            data.tabName=newName
            this.$set(this.tabsParameter,this.focusTabName,data)
            this.$eventBus.$emit("reNamekey",data,oldKeyName)
        })
        //删除指定名称的tab
        this.$eventBus.$on('rmTabByTabName',(data,keyName)=>{
            this.tabs=this.tabs.filter((item)=>{
                return item.name!==keyName
            })
        })
        //关闭此服务器的全部窗口
        this.$eventBus.$on('reServerTabName',(client)=>{
            this.tabs=this.tabs.filter((item)=>{
                return this.tabsParameter[item.name].redisClient!==client
            })
            if(this.tabs.length>0){
                this.focusTabName=this.tabs[this.tabs.length-1].name
            }
        })
    },
    methods:{
        //添加tab
        addTab(data){
            this.tabs.push({
                uid:new Date().getTime(),
                name:data.tabName,
                title:data.tabName
            })
        },
        //覆盖tab
        updateTab(data){
            let exists=this.existsTabName(data.tabName)
            if(exists){
                this.focusTabName=data.tabName
            }else{
                let index;
                //获取当前聚焦的tab下标
                for(var i=0;i<this.tabs.length;i++){
                    if(this.tabs[i].name===this.focusTabName){
                        index=i;
                        break;
                    }
                }
                this.tabs[index].title=data.tabName
                this.tabs[index].name=data.tabName
                this.focusTabName=data.tabName
                this.tabsParameter[this.focusTabName]=data
            }
        },
        //删除tab
        delTab(changeName){
            let nextFocus='';
            for(var i=0;i<this.tabs.length;i++){
                if(this.tabs[i].name===changeName){
                    if(this.tabs[i+1]){
                        //聚焦到当前窗口的后一个窗口
                        nextFocus=this.tabs[i+1].name
                        break;
                    }else if(this.tabs[i-1]){
                        //如果当前窗口是最后一个则自动聚焦到上一个窗口
                        nextFocus=this.tabs[i-1].name
                        break;
                    }
                }
            }
            this.focusTabName=nextFocus
            this.tabs=this.tabs.filter((item)=>{
                return item.name!==changeName;
            })
        },
        //判断是否存在同名的keyTab
        existsTabName(tabName){
            for(var i=0;i<this.tabs.length;i++){
                if(this.tabs[i].name===tabName){
                    return true;
                }
            }
            return false;
        }
    }
}
</script>

<style scoped>
    .main-window-box{
        margin: 5px;
    }
</style>